<template>
  <BlueBackground :title="'我的订单'">
    <div class="indent-box">
      <van-tabs v-model="active">
        <van-tab title="全部">
          <div
            class="goods-box"
            v-for="(item, key, index) in orderList1"
            :key="index + 'b'"
          >
            <van-cell :title="key">
              <template #right-icon>
                <div class="right-value" @click="confirm(item)">确认收货</div>
              </template>
            </van-cell>
            <OrderItem
              v-for="(v, i) in item"
              :key="i + 'a'"
              :mes="v"
              v-show="i > 2 && orderListKeys1[key] ? false : true"
            ></OrderItem>
            <div
              class="more"
              v-if="item.length > 3"
              @click="orderListKeys1[key] = !orderListKeys1[key]"
            >
              {{ orderListKeys1[key] ? "显示更多" : "点击收回" }}
            </div>
            <OrderBottom
              :shopArr="item"
              :time="item[0].updatedAt"
            ></OrderBottom>
          </div>
          <div
            class="goods-box"
            v-for="(item, key, index) in orderList2"
            :key="index"
          >
            <van-cell :title="key">
              <template #right-icon>
                <div class="right-value">已完成</div>
                <van-icon
                  name="delete-o"
                  class="delete-o"
                  @click="delIndent(item)"
                />
              </template>
            </van-cell>
            <OrderItem
              v-for="(v, i) in item"
              :key="i + 'a'"
              :mes="v"
              v-show="i > 2 && orderListKeys2[key] ? false : true"
            ></OrderItem>
            <div
              class="more"
              v-if="item.length > 3"
              @click="orderListKeys2[key] = !orderListKeys2[key]"
            >
              {{ orderListKeys2[key] ? "显示更多" : "点击收回" }}
            </div>
            <OrderBottom
              :shopArr="item"
              :time="item[0].updatedAt"
            ></OrderBottom>
          </div>
          <van-empty
            v-if="
              Object.keys(orderList1).length === 0 &&
              Object.keys(orderList2).length === 0
            "
            description="当前没有订单"
          />
        </van-tab>
        <van-tab title="进行中">
          <div
            class="goods-box"
            v-for="(item, key, index) in orderList1"
            :key="index"
          >
            <van-cell :title="key">
              <template #right-icon>
                <div class="right-value" @click="confirm(item)">确认收货</div>
              </template>
            </van-cell>
            <OrderItem
              v-for="(v, i) in item"
              :key="i + 'a'"
              :mes="v"
              v-show="i > 2 && orderListKeys1[key] ? false : true"
            ></OrderItem>
            <div
              class="more"
              v-if="item.length > 3"
              @click="orderListKeys1[key] = !orderListKeys1[key]"
            >
              {{ orderListKeys1[key] ? "显示更多" : "点击收回" }}
            </div>
            <OrderBottom
              :shopArr="item"
              :time="item[0].updatedAt"
            ></OrderBottom>
          </div>
          <van-empty
            v-if="Object.keys(orderList1).length === 0"
            description="没有正在进行的订单"
          />
        </van-tab>
        <van-tab title="已完成">
          <div
            class="goods-box"
            v-for="(item, key, index) in orderList2"
            :key="index"
          >
            <van-cell :title="key">
              <template #right-icon>
                <div class="right-value">已完成</div>
                <van-icon
                  name="delete-o"
                  class="delete-o"
                  @click="delIndent(item)"
                />
              </template>
            </van-cell>
            <OrderItem
              v-for="(v, i) in item"
              :key="i + 'a'"
              :mes="v"
              v-show="i > 2 && orderListKeys2[key] ? false : true"
            ></OrderItem>
            <div
              class="more"
              v-if="item.length > 3"
              @click="orderListKeys2[key] = !orderListKeys2[key]"
            >
              {{ orderListKeys2[key] ? "显示更多" : "点击收回" }}
            </div>
            <OrderBottom
              :shopArr="item"
              :time="item[0].updatedAt"
            ></OrderBottom>
          </div>
          <van-empty
            v-if="Object.keys(orderList2).length === 0"
            description="没有已完成的订单"
          />
        </van-tab>
      </van-tabs>
    </div>
  </BlueBackground>
</template>

<script>
import OrderItem from "../components/OrderItem.vue";
import BlueBackground from "../components/BlueBackground.vue";
import OrderBottom from "../components/OrderBottom.vue";
import { Toast } from "vant";
export default {
  name: "Indent",
  data() {
    return {
      active: 0,
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: sessionStorage.getItem("userToken"),
      orderList1: {},
      orderList2: {},
      orderListKeys1: null,
      orderListKeys2: null,
      isShow: true,
      oids: [],
    };
  },
  methods: {
    getIndent(i) {
      let tokenString = this.tokenString;
      let appkey = this.appkey;
      let status = i;
      this.axios({
        method: "get",
        url: "http://www.kangliuyong.com:10002/findOrder",
        params: {
          appkey,
          tokenString,
          status,
        },
      })
        .then((res) => {
          if (i == 1) {
            this.orderListKeys1 = {};
            let arr = res.data.result;
            let obj = {};
            let objId = {};
            arr.forEach((v, i) => {
              // this.count += v.count;
              // this.totalPrice += v.price * v.count;
              this.oids.push(v.oid);
              if (i > 0) {
                if (v.oid == arr[i - 1].oid) {
                  obj[arr[i - 1].oid].push(v);
                } else {
                  obj[v.oid] = [v];
                  objId[v.oid] = true;
                }
              } else {
                obj[v.oid] = [v];
                objId[v.oid] = true;
              }
            });

            this.orderList1 = obj;
            this.orderListKeys1 = objId;
          } else if (i == 2) {
            this.orderListKeys2 = {};
            let arr = res.data.result;
            let obj = {};
            let objId = {};
            arr.forEach((v, i) => {
              // this.count += v.count;
              // this.totalPrice += v.price * v.count;
              this.oids.push(v.oid);
              if (i > 0) {
                if (v.oid == arr[i - 1].oid) {
                  obj[arr[i - 1].oid].push(v);
                } else {
                  obj[v.oid] = [v];
                  objId[v.oid] = true;
                }
              } else {
                obj[v.oid] = [v];
                objId[v.oid] = true;
              }
            });

            this.orderList2 = obj;
            this.orderListKeys2 = objId;
          } else {
            // this.orderList = res.data.result;
          }
        })
        .catch((err) => {});
    },
    confirm(value) {
      let oid = value[0].oid;
      let appkey = this.appkey;
      let tokenString = this.tokenString;
      let data = `oid=${oid}&appkey=${appkey}&tokenString=${tokenString}&`;
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/receive",
        data,
      })
        .then((res) => {
          Toast.success("确认收货成功");
          this.getIndent(1);
          this.getIndent(2);
        })
        .catch((err) => {});
    },
    delIndent(value) {
      let oid = value[0].oid;
      let appkey = this.appkey;
      let tokenString = this.tokenString;
      let data = `oid=${oid}&appkey=${appkey}&tokenString=${tokenString}&`;
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/removeOrder",
        data,
      })
        .then((res) => {
          Toast.success("删除成功");
          this.getIndent(1);
          this.getIndent(2);
        })
        .catch((err) => {});
    },
  },
  created() {
    this.getIndent(1);
    this.getIndent(2);
  },
  components: {
    BlueBackground,
    OrderItem,
    OrderBottom,
  },
};
</script>

<style lang="less" scoped>
.indent-box {
  padding: 0 20px;
  .van-tabs {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
  }
  .goods-box {
    background-color: #fff;
    margin-bottom: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    .more {
      text-align: right;
      color: rgb(12, 52, 186);
      padding-right: 20px;
    }
  }
}
/deep/.van-tab--active {
  color: rgb(12, 52, 186);
}
/deep/.van-tabs__line {
  background-color: rgb(12, 52, 186);
}
/deep/.right-value {
  color: #000;
  padding-right: 10px;
}
.delete-o {
  font-size: 16px;
  line-height: inherit;
}
</style>